<template>
  <div class="hc_view">
    <el-dialog :visible.sync="dialogVisible" width="550px" :append-to-body="true">
      <div class="dialog_view">
        <div class="create-card">
          <div class="create-title">选择开账时间</div>
          <el-form ref="form" :model="form" label-width="80px" class="form-view">
            <el-form-item label="公司名称" prop="companyName">
              <el-input :disabled="true" v-model="form.companyName"></el-input>
            </el-form-item>
            <el-form-item label="启用时间" prop="enableDate">
              <el-date-picker
                type="date"
                placeholder="启用时间"
                v-model="form.enableDate"
                style="width: 100%"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="币种符号" prop="currencyType">
              <j-dict-select-tag
                type="select"
                dictCode="currency_type"
                style="width: 100%"
                v-model="form.currencyType"
                placeholder="请选择币种符号"
              ></j-dict-select-tag>
            </el-form-item>
            <span>提示：开账后，可以通过反开账回到期初录入状态以便修改调整期初数据。如果有已审核过的单据不允许反开账。</span>
            <div class="dialog-footer">
              <el-button type="primary" class="btn" @click="onSubmit" :disabled="isReverseOpen" 
                :class="isReverseOpen ? 'disabled_button' : ''">开 账</el-button>
              <el-button class="btn" @click="onReverseOpen" :disabled="!isReverseOpen"
                :class="!isReverseOpen ? 'disabled_button' : 'button_reverse'">反 开 账</el-button>
              <el-button @click="cancel()" class="btn" size="small">取 消</el-button>
            </div>
          </el-form>
        </div>
      </div>
       <!-- 提醒弹框 -->
      <DialogOpenPrompt ref="simplePrompt" @onSure="onSureSimple" @onCancel="onCancel"></DialogOpenPrompt>
    </el-dialog>
  </div>
</template>

<script>
import JDictSelectTag from '../../components/dict/JDictSelectTag.vue'
import Vue from 'vue'
import { ACCOUNT_BOOK } from '@/store/mutation-types'
import { getTimeYMD } from '@/utils/DateFormatter'
import { postAction, getAction, httpAction } from '@/api/manage'
import DialogOpenPrompt from '../components/dialogOpenPrompt'
export default {
  inject: ['closeAll'],
  components: { JDictSelectTag, DialogOpenPrompt, },
  computed: {
    isReverseOpen() {
      return this.openAccountStep === 3
    },
  },
  data() {
    return {
      dialogVisible: false,
      openAccountStep: 0, // 开账步骤
      openAccountFlag: false, // 是否直接开账
      msgTag: '',
      form: {
        companyName: '',
        enableDate: '',
        currencyType: '1',
      },
    }
  },
  created() {
    this.openAccountStep = this.$store.getters.openAccountValue
  },
  watch: {
    '$store.getters.openAccountValue'(val) {
      this.openAccountStep = val
    }
  },
  methods: {
    // 用户点击空白或者使用关闭按钮关闭弹窗执行该方法
    handleClose(done) {
      done() // 调用该方法完成后续操作
      this.$emit('onCancel')
    },
    show(flag = false) {
      this.openAccountFlag = flag
      let accountInfo = Vue.ls.get(ACCOUNT_BOOK) || {}
      this.form.companyName = accountInfo.companyName
      this.form.enableDate = getTimeYMD()
      this.dialogVisible = true
    },
    hide() {
      this.dialogVisible = false
    },
    onSubmit() {
      if (this.form.enableDate == null) {
        return this.$elMessage.error('必须选择启用时间！')
      }
      if (this.openAccountStep === 0 && !this.openAccountFlag) {
        return this.$elMessage.error('请先选择开账方式！')
      }
      this.openAccountInventory(this.form.enableDate + ' 00:00:00', 1)
      // this.$emit('onSubmit', this.form.enableDate)
    },
    cancel() {
      this.hide()
      this.$emit('onCancel')
    },
    
    // 反开账
    onReverseOpen(){
      this.onShowDialogArr('isReverseOpen',['确定要对当前账套','进行反开账吗？'])
    },
    // 开账
    openAccountInventory(enableDate, openAccountType) {
      // 1-录入期初开账 2-不录入期初直接开账
      getAction('/openAccount/openAccount', { enableDate, openAccountType }).then((res) => {
        if (res.code === 200) {
          this.$store.commit('SET_OPEN_ACCOUNT_VALUE', 3)
          this.$elMessage.success('开账成功！')
          this.closeAll()
          this.hide()
        } else {
          this.$elMessage.error(res.message)
        }
      })
    },
    // 添加账套下系统配置-开账标志
    addOpenAccountFlag(date, flag) {
      let data = {
        flag
      }
      getAction('/sysConfig/systemConfig/setOpenAccountStep', data).then((res) => {
        if (res.code === 200) {
          this.openAccountInventory(date, 0)
        } else {
          this.$elMessage.error(res.message)
        }
      })
    },
    // 反开账
    reverseOpenAccount() {
      getAction('/openAccount/reverseAccountOpening', {}).then((res) => {
        if (res.code === 200) {
          this.onShowDialogSuccess('reverseOpen', '反开账成功')
          this.closeAll()
          this.$store.commit('SET_OPEN_ACCOUNT_VALUE', 0)
        } else {
          this.onShowDialogArr('errorisReverseOpen',['当前账套存在已审核的单据，','系统无法反开账。'])
        }
      })
    },
    onSureSimple() {
      switch (this.msgTag) {
        // case '':
        //   this.openAccountInventory(this.form.enableDate)
        //   break
        case 'isReverseOpen':
          this.reverseOpenAccount()
          break
        case 'reverseOpen':
        case 'errorisReverseOpen':
          this.hide()
          break
      }
    },
    onCancel() {
      switch (this.msgTag) {
        case 'reverseOpen':
          this.hide()
          break
      }
    },
    onShowDialog(tag, msg) {
      this.msgTag = tag
      this.$refs.simplePrompt.showTwoBtn('', msg, '确定', '取消')
    },
    onShowDialogArr(tag, msgArr) {
      this.msgTag = tag
      this.$refs.simplePrompt.showTwoBtnArr('', msgArr, '确定', '取消')
    },
    onShowDialogSuccess(tag, msg) {
      this.msgTag = tag
      this.$refs.simplePrompt.showTwoBtn('el-icon-success', msg, '确定', '取消')
    },
  },
}
</script>

<style lang="scss" scoped>
.hc_view {
  ::v-deep .el-dialog {
    margin-top: 23vh !important;
    overflow: hidden;
    box-shadow: none;
    -webkit-box-shadow: none;
    border-radius: 20px;

    .el-dialog__body {
      padding: 0;
    }

    .el-dialog__header {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: transparent solid 0px;

      span {
        font-size: 0.300019rem;
        color: #666;
        font-weight: 600;
      }

      .el-dialog__headerbtn {
        position: static;

        .el-icon-close {
          color: #999;
          font-size: 0.48753rem;
        }
      }
    }
  }
}

.dialog_view {
  width: 100%;
  display: flex;
  margin-top: -50px;
  justify-content: center;

  .create-card {
    width: 360px;
    background: #ffffff;
    opacity: 1;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .create-title {
      font-size: 30px;
      font-weight: 500;
      color: #666666;
      margin-bottom: 20px;
      display: flex;
      justify-content: center;
      font-family: PingFang SC-Medium, PingFang SC;
    }

    span {
      font-size: 14px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #fd6c21;
      line-height: 25px;
    }

    .dialog-footer {
      display: flex;
      justify-content: space-between;
      margin-bottom: 40px;
      margin-top: 37px;

      .btn {
        width: 100px;
        height: 40px;
        padding: 0;
      }
    }
  }
}
.button_reverse {
  background: #20c9ac !important;
  color: #ffffff !important;
}
.disabled_button {
  background: #cbced3 !important;
  color: #666 !important;
}
</style>
